<template>
  <div class="movie-box">
    <div class="movie-tit">
      <div class="movie-tbox">
        <div class="tbox-left">
          <van-icon name="arrow-left" size="20px" color="#ffffff" @click="go" />
        </div>
        <div class="tbox-center">电影评分</div>
        <van-icon name="close" size="20px" color="#ffffff" @click="go" />
      </div>
    </div>
    <div class="tit-p">
      <p class="tit-p-pone">《{{arr.title}}》</p>
      <p>
        <van-rate v-model="arr.rating_average" allow-half readonly :size="8" />
        <span class="tit-p-s">{{num}}分</span>
      </p>
      <p class="tit-p-ptwo">{{arr.id}}万人评分</p>
    </div>
    <div class="mark">
      <ul>
        <li>
          <p class="li-pone">56.4%</p>
          <div class="li1"></div>
          <p class="li-ptwo">9-10分</p>
        </li>
        <li>
          <p class="li-pone">29.4%</p>
          <div class="li1 litwo"></div>
          <p class="li-ptwo">9-10分</p>
        </li>
        <li>
          <p class="li-pone">12.3%</p>
          <div class="li1 lithree"></div>
          <p class="li-ptwo">9-10分</p>
        </li>
        <li>
          <p class="li-pone">1.1%</p>
          <div class="li1 lifour"></div>
          <p class="li-ptwo">9-10分</p>
        </li>
        <li>
          <p class="li-pone">0.8%</p>
          <div class="li1 lifive"></div>
          <p class="li-ptwo">9-10分</p>
        </li>
      </ul>
      <p class="mark-pone">·以上数据，实时更新</p>
    </div>
    <div class="line"></div>
    <div class="draw">
      <p class="draw-pone">观众评分画像</p>
      <div class="vs">
        <div class="vs-btn vs-left">
          <img src="@/assets/images/movie/man.png" alt />
          <p class="vs-pone">男性观众</p>
          <p class="vs-ptwo">8.4分</p>
        </div>
        <p class="vs-center">vs</p>
        <div class="vs-btn vs-right">
          <img src="@/assets/images/movie/men.png" alt />
          <p class="vs-pone">女性观众</p>
          <p class="vs-ptwo">8.6分</p>
        </div>
      </div>
    </div>
    <div class="foot-line">
      <ul class="foot-ul">
        <li class="foot-li">
          <div class="fl-pone">
            95后
            <div class="fi-line"></div>
          </div>

          <p class="fl-two">8.7分</p>
        </li>
        <li class="foot-li">
          <div class="fl-pone">
            90后
            <div class="fi-line ltwo"></div>
          </div>

          <p class="fl-two">8.4分</p>
        </li>
        <li class="foot-li">
          <div class="fl-pone">
            80后
            <div class="fi-line lthree"></div>
          </div>

          <p class="fl-two">8.2分</p>
        </li>
        <li class="foot-li">
          <div class="fl-pone">
            70后
            <div class="fi-line lfour"></div>
          </div>

          <p class="fl-two">8.5分</p>
        </li>
      </ul>
    </div>
    <div class="fot-p">·以上数据，每30分钟更新一次</div>
    <div class="fo-line"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      num: ""
    };
  },
  computed: {},
  created() {
    console.log(this.$route.params.id);
    this.$axios
      .get("/api/douban/movie/subject", {
        params: {
          mId: this.$route.params.id
        }
      })
      .then(res => {
        this.arr = res.data;
        this.num = this.arr.rating_average;
        this.arr.rating_average = Math.round(this.arr.rating_average / 2);
        this.arr.id = this.arr.id / 10;
        console.log(this.arr);
      });
  },
  mounted() {},
  methods: {
    go() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="scss">
.movie-box {
  width: 100%;
  height: 100vh;
  background: rgba(51, 54, 61, 1);
  overflow: hidden;
}
.movie-tit {
  width: 100%;
  height: 44px;
  background: rgba(51, 54, 61, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.movie-tbox {
  width: 335px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .t-pone {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: rgba(223, 223, 223, 1);
    line-height: 14px;
    margin-right: 2px;
  }
}

body .tbox-center {
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
}

.ptwo {
  font-weight: 500;
  color: rgba(150, 147, 147, 1);
  line-height: 14px;
}
.tbox-left {
  display: flex;
  align-items: center;
}
.tit-p {
  margin-top: 100px;
  .tit-p-pone {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 25px;
    margin-bottom: 5px;
  }
  .tit-p-s {
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(251, 195, 74, 1);
    line-height: 30px;
    margin-left: 15px;
    margin-bottom: 7px;
  }
  .tit-p-ptwo {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7c7d7e;
    line-height: 17px;
    margin-bottom: 20px;
  }
}
.mark {
  width: 259px;
  margin: 0 auto;
  margin-bottom: 15pxs;

  ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
    overflow: hidden;
    li {
      .li1 {
        width: 22px;
        height: 135px;
        background: linear-gradient(
          180deg,
          rgba(241, 162, 99, 1) 0%,
          rgba(242, 94, 132, 1) 100%
        );
        border-radius: 5px;
        text-align: center;
        margin-left: 5px;
      }
      .li-pone {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(251, 195, 74, 1);
        line-height: 17px;
        margin-bottom: 5px;
      }
      .li-ptwo {
        margin-top: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7c7d7e;
        line-height: 17px;
      }
      .li1.litwo {
        width: 22px;
        height: 98px;
      }
      .li1.lithree {
        width: 22px;
        height: 49px;
      }
      .li1.lifour {
        width: 22px;
        height: 25px;
      }
      .li1.lifive {
        width: 22px;
        height: 8px;
      }
    }
  }
  .mark-pone {
    font-size: 12px;
    font-weight: 400;
    color: #7c7d7e;
    line-height: 17px;
  }
}
.line {
  width: 375px;
  height: 6px;
  background: black;
  margin-top: 15px;
  margin-bottom: 20px;
}
.draw {
  width: 335px;
  margin: 0 auto;
  overflow: hidden;
  .draw-pone {
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
    margin-bottom: 20px;
  }
}
.vs {
  width: 318px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 31px;
  .vs-btn {
    width: 138px;
    height: 36px;
    background: rgba($color: #000000, $alpha: 0.3);
    border-radius: 6px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .vs-center {
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.vs-pone {
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 20px;
}
.vs-ptwo {
  font-size: 12px;
  color: rgba(251, 195, 74, 1);
  line-height: 17p;
}
.foot-line {
  width: 231px;
  //   margin-bottom: 20px;
  .foot-ul {
    width: 100%;
    margin-left: 31px;
    .foot-li {
      width: 100%;

      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .fi-line {
        width: 135px;
        height: 12px;
        background: linear-gradient(
          180deg,
          rgba(241, 162, 99, 1) 0%,
          rgba(242, 94, 132, 1) 100%
        );
        border-radius: 5px;
        margin-left: 10px;
      }
      .fl-pone {
        font-size: 14px;
        color: #6b6e73;
        line-height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .fl-two {
        font-size: 14px;
        color: rgba(251, 195, 74, 1);
        line-height: 20px;
      }
      .ltwo {
        width: 126px;
        height: 12px;
      }
      .lthree {
        width: 110px;
        height: 12px;
      }
      .four {
        width: 117px;
        height: 12px;
      }
    }
  }
}
.fot-p {
  font-size: 12px;
  color: #6b6e73;
  line-height: 17px;
  margin-bottom: 32px;
}
.fo-line {
  width: 134px;
  height: 5px;
  background: #7c7d7e;
  border-radius: 100px;
  margin: 0 auto;
}
</style>
